<script setup>
import {ref,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import querystring from "query-string";
import axios from '@/http/index'
import dayjs from 'dayjs'
let route=useRoute()
console.log(route)
let id=ref(route.query.id)
let sdate=ref(route.query.sdate)
let edate=ref(route.query.edate)
let days=ref(route.query.days)
let name=ref(route.query.name)
let fname=ref(route.query.fname)
let phone=ref(route.query.phone)
let price=ref(route.query.price)
let peopleNum=ref(route.query.peopleNum)
let router=useRouter()
const onClickLeft = () => history.back();
let remainingSeconds=ref(1800)
let timer=ref(null)
const dialogTableVisible = ref(false)
let seconds = ref(remainingSeconds.value % 60)
let minutes = ref(Math.floor(remainingSeconds.value / 60))
let time=ref((minutes.value).toString().padStart(2, '0')+'：'+(seconds.value).toString().padStart(2, '0'));
let pay=ref('')
let payfs=ref('')
onMounted(()=>{
        timer.value = setInterval(() => {
        if (remainingSeconds.value > 0) {
          remainingSeconds.value--;
          let seconds = ref(remainingSeconds.value % 60)
          let minutes = ref(Math.floor(remainingSeconds.value / 60))
          time.value=(minutes.value).toString().padStart(2, '0')+'：'+(seconds.value).toString().padStart(2, '0');
        } else {
          clearInterval(timer.value);
        }
      }, 1000);
      axios.get(`/my/housexq?id=${id.value}`).then(
        res=>{
            if(res.data.code==200){
                pay.value=res.data.data
                console.log(res.data.data)
            }
        }
      )
})
let PaySuccess = async() => {
    let {data:{result,code}} = await axios.post(`/my/pcpay?price=${price.value}&name=${fname.value}`)
    if (code === 200) {
      
      window.location.href = result
      localStorage.setItem('houseid',id.value)
      axios.get(`/my/addhouseorder?id=${id.value}&entertime=${sdate.value}&leavetime=${edate.value}&days=${days.value}&entername=${name.value}&phone=${phone.value}&price=${price.value}&pay=${payfs.value}&peopleNum=${peopleNum.value}`).then(
        res=>{
          if(res.data.code==200){
            console.log('111')
          }
        }
      )
    }
  //  if (code === 200) {
  //    console.log(url);
  //  }
  }
</script>
<template>
    <div>
        <van-sticky>
          <van-nav-bar title="支付订单" left-arrow @click-left="onClickLeft"/>
        </van-sticky>
        <div style="text-align:center;margin-top:20px;">支付剩余时间&nbsp;{{time}}</div>
        <h1 style="color:red;font-weight:bolder;text-align:center;" v-for="item in pay" :key="item._id">￥{{ Number(item.price)+200 }}.00</h1>
        <div style="position: relative;margin-left:20px;">
            <p v-for="item in pay" :key="item._id">{{item.name}}【限上午{{dayjs(item.check).format('HH')}}点后入住，晚上{{dayjs(item.leave).format('HH')}}点前退...</p>
            <p style="position:absolute;top:-10px;;font-size:30px;right:10px;" @click="dialogTableVisible = true">&gt;</p>
        </div>
        <el-dialog v-model="dialogTableVisible" title="订单详情" width="90%" style="text-align:center;border:2px solid blue;" v-for="item in pay" :key="item._id">
            <h3 style="text-align: left;width:100%;color:black;">预定信息</h3>
            <p style="color: #C9C9C9">—— —— —— —— —— —— —— —— —— ——</p>
            <p style="color:black;text-align:left;margin-top:10px;">君假酒店（千山城规站店）</p>
            <p style="color:#000;text-align:left;margin-top:10px;">{{item.name}}【限上午{{dayjs(item.check).format('HH')}}点后入住，晚上{{dayjs(item.leave).format('HH')}}点前退房】</p>
            <p style="color:#000;text-align:left;margin-top:10px;">大床 不含早</p>
            <p style="color:#000;text-align:left;margin-top:10px;">{{sdate}}入住,{{edate}}离店,{{days}}晚 x 1间</p>
            <p style="color: #C9C9C9">—— —— —— —— —— —— —— —— —— ——</p>
            <h3 style="color:#000;text-align:left;margin-top:10px;">入住人信息</h3>
            <p style="color:#000;text-align:left;margin-top:10px;">
              <span>入住人：</span>
              <span>{{name}}</span>
            </p>
            <p style="color:#000;text-align:left;margin-top:10px;">
              <span>联系人手机：</span>
              <span>{{phone}}</span>
            </p>
            <p style="color: #C9C9C9">—— —— —— —— —— —— —— —— —— ——</p>
            <h3 style="color:#000;text-align:left;margin-top:10px;">金额详情</h3>
            <p style="color:#000;text-align:left;margin-top:10px;position:relative;">
              <span>{{new Date().getFullYear()+"-"+(new Date().getMonth()+1)+'-'+new Date().getDate()}}</span>
              <span style="position:absolute;right:15px;">{{days}} x ￥{{item.price}}.0</span>
            </p>
            <p style="color:#000;text-align:left;margin-top:10px;position:relative;">
              <span>优惠</span>
              <span style="position:absolute;right:15px;">￥0.0</span>
            </p>
            <p style="color:#000;text-align:left;margin-top:10px;position:relative;">
              <span>总价</span>
              <span style="position:absolute;right:15px;">￥{{item.price}}</span>
            </p>
        </el-dialog>
        <div style="width:90%;margin:40px auto;">
          <p style="margin-top:20px;border-bottom:1px solid gray;padding-bottom:10px;position:relative;">
            <img style="vertical-align: middle;width:50px;height:40px;" src="/wechat.png"/>
            <span style="margin-left:10px;">微信支付</span>
            <input type="radio" style="position:absolute;right:20px;top:20px;" value="微信支付" checked name="pay" @change="(e)=>{payfs=e.target.value}">
          </p>
          <p style="margin-top:20px;border-bottom:1px solid gray;padding-bottom:10px;position:relative;">
            <img style="vertical-align: middle;width:50px;height:50px;" src="/zfb.png"/>
            <span style="margin-left:10px;">支付宝支付</span>
            <input type="radio" style="position:absolute;right:20px;top:20px;" value="支付宝支付" name="pay" @change="(e)=>{payfs=e.target.value}">
          </p>
          <p style="margin-top:20px;border-bottom:1px solid gray;padding-bottom:10px;position:relative;">
            <img style="vertical-align: middle;width:50px;height:50px;" src="/yhk.png"/>
            <span style="margin-left:10px;">银行卡支付</span>
            <input type="radio" style="position:absolute;right:20px;top:20px;" value="雁行卡支付" name="pay" @change="(e)=>{payfs=e.target.value}">
          </p>
          <p style="margin-top:20px;border-bottom:1px solid gray;padding-bottom:10px;position:relative;">
            <img style="vertical-align: middle;width:50px;height:50px;" src="/yhk1.png"/>
            <span style="margin-left:10px;">信用卡支付</span>
            <input type="radio" style="position:absolute;right:20px;top:20px;" value="信用卡支付" name="pay" @change="(e)=>{payfs=e.target.value}">
          </p>
        </div>
        <van-button style="position:fixed;width:200px;bottom:80px;left:90px;" type="primary" @click="PaySuccess">确认支付</van-button>
    </div>
</template>
<style scoped>

</style>>